<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.0"></script>
    <script>
        window.onload = function () {
            var vm = new Vue({
                el: '#app',
                data: function () {
                    return {
                        imageUrl: '',
                        imageUrl2:'',
                        Image:'',
                        searchForm: {
                            style: '',
                            size: '',
                            sizeCategories: ['XS', 'S', 'M', 'L', 'XL', '2XL', '3XL', '4XL'],
                        },
                        addForm: {
                            visible: false,
                            labelWidth: '70px',
                            style: '',
                            size: '',
                            summation: '',
                            rent: '',
                            company: '',
                            pic:''
                        },
                        clothTable: {
                            nowIndex: 0,
                            height: 600,
                            tableData: [{
                                id: 1,
                                photo: '',
                                style: 'haha',
                            }],

                            columnData: [{
                                prop: 'id',
                                label: '编号',
                            }, {
                                prop: 'style',
                                label: '风格',
                            }, {
                                prop: 'size',
                                label: '尺码',
                            }, {
                                prop: 'summation',
                                label: '总量',
                            }, {
                                prop: 'rent',
                                label: '租金',
                            }, {
                                prop: 'damage',
                                label: '损坏数量',
                            }, {
                                prop: 'cleaning',
                                label: '清洗数量',
                            }, {
                                prop: 'company',
                                label: '所属公司',
                            },{
                                prop:'photo',
                                label:'照片',
                            }],

                        },
                        editForm: {
                            visible: false,
                            labelWidth: '70px',
                            style: '',
                            size: '',
                            summation: '',
                            rent: '',
                            company: '',
                            damage: '',
                            pic:''
                        },
                        cleanForm: {
                            visible: false,
                            cleanamount: ''
                        },
                        finishForm: {
                            visible: false,
                            finish: ''
                        }
                    }

                },
                methods: {
                    handleAvatarSuccess1: function (res,file) {
                        this.imageUrl = URL.createObjectURL(file.raw);
                        this.addForm.pic = res;
                        this.Image =res;
                        console.log(this.Image);
                        console.log(res);
                    },
                    handleAvatarSuccess2: function (res,file) {
                        this.imageUrl2 =URL.createObjectURL(file.raw);
                        this.editForm.pic =res;
                        this.Image =res;
                        console.log(this.Image);
                        console.log(res);
                    }
                    ,
                    beforeAvatarUpload:function(file) {
                        this.imageUrl ="";
                        this.imageUrl2="";
                        const isJPG = file.type === 'image/jpeg';
                        const isPNG = file.type ==='image/png';
                        const isLt2M = file.size / 1024 / 1024 < 2;
                        if (! (isJPG || isPNG)) {
                            this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
                        }
                        if (!isLt2M) {
                            this.$message.error('上传头像图片大小不能超过 2MB!');
                        }
                        return isJPG && isLt2M;
                    },
                    searchCloth: function (style, size) {
                        var url;
                        if ((style == '' && size == '') || (style == undefined && size == undefined)) {
                            url = '/select';
                        }
                        else {
                            url = '/selectbycondition';
                        }
                        // url='/select';
                        this.$http.post(url, {
                            size: this.searchForm.size,
                            name: this.searchForm.style
                        }).then(function (res) {
                            console.log(res.body);
                            this.clothTable.tableData = [];
                            for (var i = 0; res.body[i] != null; i++) {
                                this.clothTable.tableData.push({
                                    id: res.body[i].id,
                                    style: res.body[i].name,
                                    size: res.body[i].size,
                                    summation: res.body[i].amount,
                                    rent: res.body[i].price,
                                    damage: res.body[i].damageAmount,
                                    cleaning: res.body[i].cleaningAmount,
                                    company: res.body[i].company,
                                    photo:res.body[i].pic
                                });
                            }

                        }, function (res) {
                            alert(url);
                        })
                    },
                    reset: function () {
                        this.searchForm.style = '';
                        this.searchForm.size = '';
                    },
                    showAddForm: function () {
                        this.addForm.visible = true;
                    },
                    add: function () {
                        var url = '/addclothes';
                        if(this.addForm.style==''||this.addForm.summation==''||this.addForm.rent==''
                            ||this.addForm.size==''||this.addForm.company=='')
                            alert("填入内容不能为空")
                        else{
                        this.$http.post(url, {
                            name: this.addForm.style,
                            amount: this.addForm.summation,
                            price: this.addForm.rent,
                            size: this.addForm.size,
                            company: this.addForm.company,
                            pic:this.addForm.pic
                        }).then(function (res) {
                            //succeed!
                            this.addForm.visible = false;
                            this.searchCloth();
                        }, function (res) {
                            this.addForm.visible = false;
                            alert('失败');
                        });

                        // this.clothTable.tableData.push({
                        //     id:1,
                        //     photo:1,
                        //     style:this.addForm.style,
                        //     size:this.addForm.size,
                        //     summation:this.addForm.summation,
                        //     damage:0,
                        //     cleaning:0,
                        //     company:this.addForm.company,
                        //     rent:this.addForm.rent
                        // });
                        this.addForm.visible = false;
                        this.addForm.style = '';
                        this.addForm.size = '';
                        this.addForm.summation = '';
                        this.addForm.rent = '';
                        this.addForm.company = '';
                    }},
                    showEditTable: function (index) {
                        this.editForm.visible = true;
                        this.editForm.id = this.clothTable.tableData[index].id;
                        this.editForm.style = this.clothTable.tableData[index].style;
                        this.editForm.rent = this.clothTable.tableData[index].rent;
                        this.editForm.summation = this.clothTable.tableData[index].summation;
                        this.editForm.size = this.clothTable.tableData[index].size;
                        this.editForm.company = this.clothTable.tableData[index].company;
                        this.imageUrl2 = this.clothTable.tableData[index].photo;
                        this.editForm.damage = 0;
                    },
                    showCleanTable: function (index) {
                        this.cleanForm.visible = true;
                        this.clothTable.nowIndex = index;
                        this.cleanForm.amount = this.clothTable.tableData[index].summation;
                        this.cleanForm.id = this.clothTable.tableData[index].id;
                        this.cleanForm.cleanamount = 0;
                    },
                    showFinishForm: function (index) {
                        this.finishForm.visible = true;
                        this.clothTable.nowIndex = index;
                        this.finishForm.amount = this.clothTable.tableData[index].summation;
                        this.finishForm.id = this.clothTable.tableData[index].id;
                        this.finishForm.finish = 0;
                    },
                    update: function () {
                        this.editForm.visible = false;
                        var url = '/edit';
                        if (this.editForm.damage == '') {
                            this.editForm.damage = 0;
                        }
                        ;
                        if(this.editForm.damage=='')
                            this.editForm.damage = 0;
                        if(this.editForm.style==''||this.editForm.summation==''||this.editForm.rent==''
                            ||this.editForm.size==''||this.editForm.company==''){
                            alert("填入内容不能为空")
                        }
                        else{
                        this.$http.post(url, {
                            id: this.editForm.id,
                            name: this.editForm.style,
                            price: this.editForm.rent,
                            amount: this.editForm.summation,
                            size: this.editForm.size,
                            company: this.editForm.company,
                            damageAmount: this.editForm.damage,
                        }, {
                            emulateJson: true
                        }).then(function (res) {
                            this.editForm.visible = false;
                            this.searchCloth();
                        }, function (res) {
                            alert("损坏数量不可大于可用量");
                        })
                    }},
                    //确认清洗按钮
                    clean_cloth: function () {
                        this.cleanForm.visible = false;
                        var url = '/clean';
                        if (this.cleanForm.cleanamount == "") {
                            this.cleanForm.cleanamount = 0;
                        }
                        ;
                        this.$http.post(url, {
                            id: this.cleanForm.id,
                            amount: this.cleanForm.amount,
                            cleaningAmount: this.cleanForm.cleanamount,
                        }, {
                            emulateJson: true
                        }).then(function (res) {
                            this.editForm.visible = false;
                            this.searchCloth();
                        }, function (res) {
                            alert(res.status);
                        })
                    }},
                    //清洗完成按钮
                    finishClean: function () {
                        this.finishForm.visible = false;
                        var url = '/finishclean';
                        if (this.finishForm.finish == "") {
                            this.finishForm.finish = 0;
                        }
                        ;
                        this.$http.post(url, {
                            id: this.finishForm.id,
                            amount: this.finishForm.amount,
                            cleaningAmount: this.finishForm.finish,
                        }, {
                            emulateJson: true
                        }).then(function (res) {
                            this.editForm.visible = false;
                            this.searchCloth();
                        }, function (res) {
                            alert(res.status);
                        })
                    },
                    cleanAll: function () {
                        this.cleanForm.cleanamount = this.clothTable.tableData[this.clothTable.nowIndex].summation;
                    },
                    finishAll: function () {
                        this.finishForm.finish = this.clothTable.tableData[this.clothTable.nowIndex].cleaning;
                    },
                }

                );

            vm.searchCloth();

            //将table高度适应屏幕高度
            vm.clothTable.height=document.documentElement.clientHeight-80



    </script>
</head>
<body>
<div id="app">
    <!--衣服查询表单-->
    <div id="searchForm">
        <el-form :inline="true" :model="searchForm">
            <el-form-item label="衣服风格">
                <el-input v-model="searchForm.style" placeholder="衣服风格"></el-input>
            </el-form-item>
            <el-form-item label="衣服尺寸">
                <el-select v-model="searchForm.size" placeholder="衣服尺寸" clearable>
                    <el-option v-for="size in searchForm.sizeCategories" :label="size" :value="size"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchCloth(searchForm.style,searchForm.size)">查询</el-button>
                <el-button @click="reset()">重置</el-button>
                <el-button type="info" @click="showAddForm()">添加</el-button>
            </el-form-item>
        </el-form>
    </div>
    <!--衣服表格-->
    <div id="clothTable">
        <el-table
                :data="clothTable.tableData"
                :max-height="clothTable.height"
                fit>

            <el-table-column v-for="col in clothTable.columnData"
                             :prop="col.prop"
                             :label="col.label"
                             min-width="60px">
            </el-table-column>
            <el-table-column
                    label="图片"
                    width="100">
                <template slot-scope="scope">
                    <div ></div>
                    <img  :src="Image" />
                </template>
            </el-table-column>

            <el-table-column
                    label="操作"
                    width="200">
                <template slot-scope="scope">
                    <el-button @click.native.prevent="showEditTable(scope.$index)" type="text" size="small">编辑
                    </el-button>
                    <el-button @click.native.prevent="showCleanTable(scope.$index)" type="text" size="small">清洗
                    </el-button>
                    <el-button @click.native.prevent="showFinishForm(scope.$index)" type="text" size="small">清洗完成
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!--点击添加按钮弹出来的表单-->
    <div id="addForm">
        <el-dialog title="添加风格" :visible.sync="addForm.visible">
            <el-form :model="addForm">
                <el-row>
                    <!--图片-->
                    <el-col :span="8">
                        <el-upload
                                class="avatar-uploader"
                                action="/uploadimg"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess1"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-col>

                    <el-col :span="16">
                        <el-col :span="12">
                            <el-form-item label="风格" :label-width="addForm.labelWidth">
                                <el-input v-model="addForm.style" auto-complete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="数量" :label-width="addForm.labelWidth">
                                <el-input v-model="addForm.summation" auto-complete="off"></el-input>
                            </el-form-item>

                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="租金" :label-width="addForm.labelWidth">
                                <el-input v-model="addForm.rent"></el-input>
                            </el-form-item>
                            <el-form-item label="尺码" :label-width="addForm.labelWidth">
                                <el-select v-model="addForm.size" placeholder="选择衣服尺码">
                                    <el-option v-for="size in searchForm.sizeCategories" :label="size"
                                               :value="size"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="所属公司" :label-width="addForm.labelWidth">
                                <el-input v-model="addForm.company"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-col>

                </el-row>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addForm.visible=false">取 消</el-button>
                <el-button type="primary" @click="add()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
    <!--点击编辑弹出来的表单-->
    <div id="editForm">
        <el-dialog title="编辑" :visible.sync="editForm.visible">
            <el-form :model="editForm">
                <el-row>
                    <!--图片-->
                    <el-col :span="8">
                        <el-upload
                                class="avatar-uploader"
                                action="/uploadimg"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess2"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-col>

                    <el-col :span="16">
                        <el-col :span="12">
                            <el-form-item label="风格" :label-width="editForm.labelWidth">
                                <el-input v-model="editForm.style" auto-complete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="数量" :label-width="editForm.labelWidth">
                                <el-input v-model="editForm.summation" auto-complete="off"></el-input>
                            </el-form-item>

                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="租金" :label-width="editForm.labelWidth">
                                <el-input v-model="editForm.rent"></el-input>
                            </el-form-item>
                            <el-form-item label="尺码" :label-width="editForm.labelWidth">
                                <el-select v-model="editForm.size" placeholder="选择衣服尺码">
                                    <el-option v-for="size in searchForm.sizeCategories" :label="size"
                                               :value="size"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="所属公司" :label-width="editForm.labelWidth">
                                <el-input v-model="editForm.company"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="追加损坏" :label-width="addForm.labelWidth">
                                <el-input v-model="editForm.damage" required></el-input>
                            </el-form-item>
                        </el-col>
                    </el-col>

                </el-row>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addForm.visible=false">取 消</el-button>
                <el-button type="primary" @click="update">确 定</el-button>
            </div>
        </el-dialog>
    </div>
    <!--点击清洗弹出来的表单-->
    <div id="cleanForm">
        <el-dialog title="编辑清洗数量" :visible.sync="cleanForm.visible" @close="cleanForm.cleanamount=''">
            <el-form :inline="true" :model="cleanForm">
                <el-form-item label="清洗数量">
                    <el-input v-model="cleanForm.cleanamount" placeholder="清洗数量"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="clean_cloth">确定</el-button>
                    <el-button type="info" @click="cleanAll()">全部清洗</el-button>
                    <el-button @click="cleanForm.visible=false;cleanForm.cleanamount='';">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
    <!--点击清洗完成弹出来的表单-->
    <div id="finishForm">
        <el-dialog :model="finishForm" :visible.sync="finishForm.visible" title="编辑清洗完成数量">
            <el-form :inline="true">
                <el-form-item label="清洗完成数量">
                    <el-input v-model="finishForm.finish" placeholder="清洗完成数量"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="finishClean">确定</el-button>
                    <el-button type="info" @click="finishAll()">全部洗完</el-button>
                    <el-button type="" @click="finishForm.visible=false;finishForm.finish='';">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</div>
</body>
</html>